<template>
    <div class="flex items-center">
        <template v-for="(item, idx) in lists" :key="idx">
            <div class="status s-nostart">{{ item.title }}</div>
            <div v-if="item.state === 'nostart'" class="status s-nostart">{{ item.title }}</div>
            <div v-if="item.state === 'doing'" class="status s-doing" title="正在做">实战1</div>
            <div v-if="item.state === 'done'" class="status s-done"><i class="feather-award"></i>作业</div>
            <div v-if="item.state === 'commited'" class="status s-commited" title="正在做">实战</div>
        </template>
    </div>
</template>
<script setup>
defineProps({
    lists: {
        type: Array,
        default: () => [{
            title: "实战",
            state: "doing", // doing:正在做, commited:已提交, done:已完成, nostart:未开始
            levelNo: "", // 选择关卡
            lessonID: 1,
        }, {
            title: "实战",
            state: "commited", // doing:正在做, commited:已提交, done:已完成, nostart:未开始
            levelNo: "", // 选择关卡
            lessonID: 2,
        }, {
            title: "实战",
            state: "done", // doing:正在做, commited:已提交, done:已完成, nostart:未开始
            levelNo: "", // 选择关卡
            lessonID: 3,
        }, {
            title: "实战",
            state: "nostart", // doing:正在做, commited:已提交, done:已完成, nostart:未开始
            levelNo: "", // 选择关卡
            lessonID: 4,
        }]
    }
})
</script>